<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>新用户注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/server.css">

    <!--[if lt IE 9]>
        <script src="/bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>

    <header class="usercenter-header">
        <img src="image/header_bg.png" class="header-image" />
        <div class="logos">
            <img src="image/default.png" alt="云校logo" class="yx-logo" style="margin-left: -96px;" />
        </div>
    </header>

    <div class="yx-content">
        <!-- 页面内容区域 -->
        <article class="usercenter-container">
            <header class="tab-title">
                <!--未被选择的加上unactive-->
                <span name="email">邮箱注册</span>
                <b>|</b>
                <span class="unactive" name="mobile">手机号码注册</span>
            </header>

            <!--创建云校帐号表单-->
            <form class="create-account" role="form" id="registerForm">
                <!-- 0 是邮箱注册 2 是邮箱注册  -->
                <input type="hidden" value="0" id="register_Type" />
                <!--验证帐号 当输入的是电话时再form-list后添加account-phone -->
                <!--当输入的是邮箱时再form-list后添加account-email-->



                <section class="form-list account-email">
                    <input type="text" id="emailAddress" placeholder="请输入邮箱地址" class="address">
                    <!--右侧检测结果状态 验证中，在validate后添加 checking 验证正确后，添加right 错误添加error -->
                    <aside class="validate">
                        <span></span>
                    </aside>
                </section>
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <strong>Warning!</strong> Better check yourself, you're not looking too good.
                </div>

                <section class="form-list account-phone hide">
                    <input type="text" id="mobileAddress" placeholder="请输入手机号码" class="address">
                    <!--右侧检测结果状态 验证中，在validate后添加 checking 验证正确后，添加right 错误添加error -->
                    <aside class="validate">
                        <span></span>
                    </aside>
                </section>

                <section class="form-list account-password">
                    <input type="password" id="password" maxlength="20" placeholder="请输入密码">

                    <label class="capital hide"></label>
                    <!--分为三种状态 checking right error -->
                    <aside class="validate hide">
                        <span></span>
                    </aside>
                </section>

                <section class="form-list captchas-validate">
                    <div class="captchas-img">
                        <img id="captchaImage" data-captcha="dc9b096a-d3b6-4cf1-a5b8-47f205a9b70d" src="image/code.jpg" alt="验证码" />
                        <a id="captchaRefresh">换一张</a>
                    </div>
                    <input type="text" id="emailCaptcha" maxlength="4" placeholder="输入验证码">
                    <aside class="validate">
                        <span></span>
                    </aside>
                </section>

                <section class="form-list photo-validate hide">
                    <input type="text" id="mobileCaptcha" maxlength="6" placeholder="输入短信验证码">
                    <a id='getCaptcha'>获取短信验证码</a>
                    <span class='afterTime hide'>获取短信验证码</span>
                    <aside class="validate">
                        <span></span>
                    </aside>
                </section>

                <!--用户协议提醒-->
                <section class="form-list user-protocol">
                    点击注册，即同意我们的 <a id="btn-agreement">用户协议</a>
                </section>

                <section class="form-list">
                    <a class="account-btn account-submit" id="btn-register">注册</a>
                </section>

                <section class="form-list">
                    <a class=" account-btn account-other" id="btn-login">已有帐号？直接登录 <span class="login-go"></span>
                    </a>
                </section>
            </form>
        </article>


    </div>
    <!--  -->

    <footer class="usercenter-footer">
        <ul>
            <li><a href="http://www.yunxiao.com">云校官网</a></li>
            <li><a href="http://paike.yunxiao.com">排课</a></li>
            <li><a href="http://bbs.yunxiao.com">论坛</a></li>
            <li><a>北京修齐治平科技有限公司 ©2015</a></li>
        </ul>
    </footer>

</body>
</html>

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        // 邮箱正则
        var registerReg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;

        // 注册界面切换和注册类型保存
        $(".tab-title span").on("click", function () {
            var $this = $(this);
            $(this).removeClass("unactive");
            $(this).siblings().addClass("unactive");

            var index = $this.index();
            if (index == 0) {
                $(".account-phone").addClass("hide");
                $(".account-email").removeClass("hide");
                $(".photo-validate").addClass("hide");
                // 邮箱正则
                registerReg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
            } else {
                $(".account-email").addClass("hide");
                $(".account-phone").removeClass("hide");
                $(".photo-validate").removeClass("hide");

                // 手机正则
                registerReg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
            }

            $("#register_Type").val(index);
        });


        $("#btn-register").on("click", function () {
            if (validateForm()) {
                $("#registerForm").submit();
            }
        });

        /// 验证表单
        function validateForm() {
            var registerType = $("#register_Type").val();
            var userAccount = registerType == "0" ? $("#emailAddress").val() : $("#mobileAddress").val();

            console.log(userAccount);

            if (!registerReg.test(userAccount)) {
                // alert("账号格式错误!");给出错误提示
                return;
            }


            var userPassword = $("#password").val();
            if (userPassword.length < 6) {
                return;
            }

            // 请求手机验证码。
        }

    })
</script>

